<template>
    <div>
        <div class="NoticeClass">
            <div class="modal_title">
                
                <h3>{{notice.head}}</h3>
                <p>{{notice.ctime}}</p>
            </div>
            <div class="messContent">
                <!-- <div class="messmodal_greet">
                    <span>尊敬的用户：</span>
                    <span>您好！</span>
                </div> -->
                <p v-html='notice.content' style="line-height: 25px;">
                    <!-- {{}} -->
                </p>
                <!-- <div class="modal_conclusion">
                    <span>xx支付机构</span>
                    <span>{{notice.ctime | timeFilter}}</span>
                </div> -->
            </div>
            <a-button class="backList" @click='backList'>&#60;&#60; 返回</a-button>
        </div>
    </div>
</template>

<script>
    import api from "@/common/api";
    export default {
        data() {
            return {
                notice: {
                    content: '',
                    head: '',
                    ctime: '',
                }
            };
        },
        filters: {
            timeFilter: function (value) {
                let year = value.substring(0, 4)
                let mouth = value.substring(5, 7)
                let day = value.substring(8, 10)
                return year + '年' + mouth + '月' + day + '日';
            }
        },
        mounted() {
            if (this.$route.query.id) {
                let id = this.$route.query.id;
                this.MessDetail(id);
            }
        },
        methods: {
            MessDetail(value) {
                let data = {
                    id: value
                }
                api.messDetail(data, res => {
                    // console.log(res)
                    if (res.code == 'OK') {
                        this.notice = res.data
                    }
                }, err => {

                })
            },
            backList() {
                this.$router.push('/messageList')
            }

        }
    };
</script>
<style lang="less" scoped>
    .NoticeClass {
        width: 90%;
        padding: 50px;
        margin: 0 auto;
        position: relative;
    }

    .modal_title {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-bottom: 1px solid #ccc;
        margin-bottom: 40px;
        
    }

    .backList {
        /* position: absolute;
        top: 80%;
        right: 0%; */
        display: block;
        margin: 50px auto;
    }

    .messContent {
        width: 60%;
        margin: 0 auto;
    }

    .messmodal_greet {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .messmodal_greet span {
        margin-bottom: 8px;
    }

    .modal_conclusion {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        margin-top: 30px;
    }

    .modal_conclusion span {
        margin-bottom: 8px;
    }
</style>